<template>
    <el-dialog v-model="localDialogVisible" :title="localTitle" :before-close="localCancelDialog" width="48%">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="媒资名称" label-width="85px">
                <el-autocomplete
                    v-model="localqueryList.keyword"
                    :fetch-suggestions="localHandleSearchSuggest"
                    :trigger-on-focus="false"
                    class="inline-input"
                    autofocus="true"
                    clearable
                    placeholder="请输入媒资名称"
                    size="small"
                />
            </el-form-item>
            <el-form-item label="媒资类型" label-width="85px">
                <el-select v-model="localqueryList.mediatype" size="small" placeholder="请选择媒资类型">
                    <el-option
                    v-for="item,index in mediaTypes"
                    :key="index"
                    :label="item"
                    :value="index"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="媒资ID" label-width="85px">
                <el-input
                    v-model="localqueryList.mediaid"
                    placeholder="请输入媒资ID"
                    clearable
                    size="small"
                />
            </el-form-item>
            <el-form-item label="媒资来源" label-width="85px">
                <el-input
                    v-model="localqueryList.sourcefrom"
                    placeholder="请输入媒资来源"
                    clearable
                    size="small"
                />
            </el-form-item>
            <el-form-item label="媒资来源ID" label-width="85px">
                <el-input
                    v-model="localqueryList.sourceid"
                    placeholder="请输入媒资来源ID"
                    clearable
                    size="small"
                />
            </el-form-item>
            <el-form-item label="媒资状态" label-width="85px">
                <el-radio v-model="localqueryList.inuse" label="1">上线</el-radio>
                <el-radio v-model="localqueryList.inuse" label="0">下线</el-radio>
            </el-form-item>
            <el-form-item label="员工ID" label-width="85px">
                <el-input
                    v-model="localqueryList.subid"
                    placeholder="请输入员工ID"
                    clearable
                    size="small"
                />
            </el-form-item>
            <el-form-item label="是否多集" label-width="85px">
                <el-radio v-model="localqueryList.hasseries" label="1">是</el-radio>
                <el-radio v-model="localqueryList.hasseries" label="0">否</el-radio>
            </el-form-item>
        </el-form>
        <template #footer>
            <div align="center">
                <el-button type="primary" size="small" @click="handleGoSearch">搜索</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
    import {toRef} from 'vue'
    import mediaTypeMixin from "@/mixins/mediaTypeMixin";
    export default {
        name: "",
        components: {},
        props: {
            title:{
                type: String,
                default: ''
            },
            visible: {
                type: Boolean,
                default: false
            },
            queryList: {
                type: Object,
            },
        },
        emits: ['cancelDialog','getData','handleSearchSuggest'],
        setup(props, context) {
            const localTitle = toRef(props, 'title')
            const localDialogVisible = toRef(props, 'visible')
            const localqueryList = toRef(props, 'queryList')
            const localCancelDialog = () => {
                context.emit('cancelDialog')
            }
            const localHandleSearchSuggest = (value,cb) => {
                context.emit('handleSearchSuggest',value,cb)
            }

            
            // 媒资类型
            const { mediaTypes } = mediaTypeMixin()

            const handleGoSearch = () => {
                context.emit('cancelDialog')
                context.emit('getData')
            }
            return {
                localTitle,
                localDialogVisible,
                localqueryList,
                mediaTypes,
                localCancelDialog,
                localHandleSearchSuggest,
                handleGoSearch
            }
        }
    }
</script>

<style scoped  lang="scss">

</style>